<template>
	<div id="componentGuess" ref="componentGuess">
        <div id="guessTitle">
           <h1>猜你喜欢</h1>
        </div>
        <CommodityRecommendList
          v-if="commodityInfor"
          :goodsList="commodityInfor">
        </CommodityRecommendList>
	</div>
</template> 

<script>
import axios from 'axios';
import {Toast} from "../../utils/toast";
import {showLoading ,hideLoading} from "../../utils/loading";
import CommodityRecommendList from '@/components/CommodityRecommendList';
export default {
  	props: {
        goodsCode :"",
        goodsClassId: "",
        classCode: "",
	},
  	data () {
    	return {
            show: false,
            showInfo: [],
            commodityInfor: '',
		}
	},
	components: {
        CommodityRecommendList
	},
	created () {

    },
    methods: {
        getContent:function() {
            var that = this;
            let options = {
                method: "post",
                url: api.goods_host + "/mallGoods/queryMallGoodsListByGoodsClass",
                data: {
                    "enterpriseCode": api.enterpriseCode,
                    "classCodeSearch": this.classCode,
                    "usePlatform": "wap",
                    "storeCode": localStorage.getItem("storeCode"),
                    "isPage": true,
                    "pageNum": 1,
                    "length": 6
                },
                headers: {
                    sessionId: localStorage.getItem("sessionId"),
                }
            }
			axios(options).then(function(res) {
                var temp = res.data.data[0].results;
                for (let i = 0; i < temp.length; i++){
                    if(temp[i].goodscode == that.goodsCode){
                        temp.splice(i,1);
                        i--;
                    }else if(!temp[i].urllist){
                        temp[i].urllist = [{"imgurl": "static/image/demo1.png"}]
                    }
                }
                temp.length >= 1 ? document.querySelector("#guessTitle").style.display = 'block' : document.querySelector("#guessTitle").style.display = 'none';
                temp.length > 6 ? temp.length = 6 : "";
                that.commodityInfor = temp;
			})
			.catch(function(res) {
                    
			});	
        },
        whatthefuck() {},
        checkMore:function(){
            this.$router.push({path: 'goodsClassify',query: {"code": this.classCode}})
        },
        checkOthers:function(goodsCode){
            this.$router.replace({path: 'detail',query: {"code": goodsCode}})
        }
    },
	mounted () {
        this.getContent();
        // var userAgent = navigator.userAgent;
        // var index = userAgent.indexOf("Android");
        // if(index <= 0){
        //     // console.log(this.$refs.componentGuess,index,"componentGuess");
        //     this.$refs.componentGuess.style.paddingBottom = '3rem';
        // }
        
    },
    watch:{
        goodsCode(){
            this.getContent();
        }
    }
}
</script>

<style scoped>

    #componentGuess{
        width: 100%;
        position: relative;
        overflow:hidden;
    }
    /* #componentGuess:after{
        content:'';
        display:block;
        clear: both;
    } */
    #guessTitle{
        text-align: left;
        box-sizing: border-box;
        height: 1.5rem;
        line-height: 1.5rem;
        text-indent: .7rem;
        font-size: .7rem;
        /* border-bottom: 1px solid lightgray; */
    }
    #guessTitle>h1{
        width:100%;
        height:100%;
        text-align: center;
        align-items: center;
        box-sizing: border-box;
        font-size: 0.8rem;
        color:#444444;
        text-align: center
    }
    #guessTitle>h1::before, #guessTitle>h1::after{
    content: '';
    height: 1px;
    width: 1.8rem;
    background: #a9a9a9;
    display: inline-block;
    margin: 0.3rem 1rem;
    }
    #guessContent{
        text-align: left;
        width: 100%;
        height: 6.5rem;
        padding-top: .5rem;
        overflow-x: scroll;
    }
    .showArea{
        height: 100%;
    }
    .showItem{
        height: 100%;
        width: 5rem;
        float: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
    }
    .showPic{
        width: 3rem;
    }
    .showInfo{
        padding: 0;
    }
    .more{
        width: 2rem;
        align-items: flex-end;
    }
    .more img{
        width: 2rem;
    }
</style>